<template>
  <el-card>
    <div slot="header" class="df jcsb aic">
      <span>商品分类</span>
      <el-button type="primary" @click="openDialog">添加分类</el-button>
    </div>
    <!-- table表格 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" style="width:120px"></el-table-column>
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
          <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            :disabled="!scope.row.isEdit"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 5px"
            size="mini"
            @click="handleEdit(scope.row)"
            :type="scope.row.isEdit ? 'success' : 'default'"
          >
            {{ scope.row.isEdit ? '完成' : '编辑' }}
          </el-button>

          <el-button size="mini" @click="handleDel(scope.row)" type="danger">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="mt20"
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 编辑弹窗 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="分类名称">
          <el-input v-model="formData.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <!-- <template>
            <el-switch
              v-model="formData.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template> -->
          <el-select v-model="formData.state" placeholder="请选择是否启用">
            <el-option label="true" value="true"></el-option>
            <el-option label="false" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {getCateListReq, editCateReq, addCateReq, delCateReq} from '@/api/goods'

//数据先行
export default {
  data() {
    return {
      //分类数据
      tableData: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,
      dialogFormVisible: false, //修改弹窗显示与隐藏
      //弹窗数据
      formData: {
        cateName: '',
        state: '',
      },
    }
  },
  //方法
  methods: {
    //获取数据方法
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getCateListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {total, data} = res.data
      //修改数据
      data.forEach(v => {
        //把state转换为布尔值
        v.state = v.state === 1 ? true : false
        //添加一个字段 是否可编辑
        v.isEdit = false
      })

      // let temp = data.map(v => {
      //   return {
      //     ...v,
      //     state: v.state === 1 ? true : false,
      //   }
      // })

      //数据赋值
      this.total = total
      this.tableData = data

      //如果获取data为[] 且currentPage>1 退回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },
    //改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    //编辑
    async handleEdit(row) {
      //把可编辑状态取反
      row.isEdit = !row.isEdit
      //发送请求
      if (!row.isEdit) {
        // 发送请求
        let res = await editCateReq({
          ...row,
          state: row.state ? 1 : 0,
        })
      }
    },
    //删除
    async handleDel(row) {
      // console.log('row :>> ', row)
      let id = row.id
      // console.log('id :>> ', id);
      let res = await delCateReq({id})
      let {code, msg} = res.data
      if (code === 0) {
        this.getData()
      }
    },

    //打开弹窗
    openDialog() {
      this.dialogFormVisible = true
    },

    //添加分类
    async handleConfirm() {
      // console.log('this.formData :>> ', this.formData);
      let state = Number(Boolean(this.formData.state))
      //发送请求
      let res = await addCateReq({...this.formData, state})
      // console.log('res :>> ', res)
      //结构数据
      let {code, msg} = res.data
      //判断
      if (code === 0) {
        this.dialogFormVisible = false
        this.getData()
        this.formData = {}
      }
    },
  },
  //初始化发送请求
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped></style>
